<template>
	<view style="padding: 160rpx 0pt;">
		<u-navbar title="看看" @leftClick="leftClick" border>
			<view class="top-left" slot="left">
				<u-badge  max="99" :value="trend_count" :offset="[-5,-5]" absolute></u-badge>
				<u-icon name="chat-fill" size="56rpx"></u-icon>
			</view>
			
		</u-navbar>
		<block v-for="(item, index) in list" :key="index">
			<view @click="jump(item)">
				<view class="post-item">
					<view class="post-item-top-user">
						<view>
							<u-avatar class="avatar" :customStyle="{marginRight:'20rpx'}"
								:src="'https://wjlm.goldsu.cn'+item.user.pic" level-bg-color="#8072f3"></u-avatar>
						</view>
						<view class="center">
							<view style="display: flex;align-items: center;">
								<text class="username">{{ item.user.user.substring(0, 12) }}</text>
							</view>
							<view>
								<text class="time">{{ item.create_time }}</text>
							</view>
						</view>
						<view class="right">
							<u-icon v-if="userData.id==item.user_id" :size="20" @tap.stop="onActive(item, index)"
								class="arrow-down" name="trash"></u-icon>
						</view>
					</view>
					<view class="post-content">
						<view class="post-content-wrap u-line-5">
							<text>{{item.content}}</text>
						</view>
						<video v-if="item.video" :src="item.video" class="img-style-1" object-fit="cover"></video>
						<block v-else>
							<!--一张图片-->
							<block v-if="item.images.length == 1">
								<image :lazy-load="true" mode="widthFix" class="img-style-1" :src="item.images[0]"
									@tap.stop="previewImage(item.images[0], item.images)">
								</image>
							</block>
							<!--二张图片-->
							<block v-if="item.images.length == 2">
								<view class="img-style-2">
									<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
										@tap.stop="previewImage(mediaItem, item.images)" mode="aspectFill"
										:src="mediaItem"></image>
								</view>
							</block>
							<!--三张以上图片-->
							<block v-if="item.images.length > 2">
								<view class="img-style-3">
									<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
										@tap.stop="previewImage(mediaItem, item.images)" mode="aspectFill"
										:src="mediaItem"></image>
								</view>
							</block>
						</block>
					</view>

					<!-- 底部 -->
					<view class="p-footer">
						<view class="p-item">
							<u-icon name="share" size="40rpx"></u-icon>
							<text class="count">分享</text>
						</view>
						<view class="p-item">
							<u-icon name="chat" size="40rpx"></u-icon>
							<text class="count">{{ item.comment }}</text>
						</view>
						<view class="p-item" @click.stop="addCollection(item, index)">
							<u-icon size="40rpx" :name="item.status?'heart-fill':'heart'"
								:color="item.status?'#e62e00':'#bfbfbf'"></u-icon>
							<text class="count">{{ item.is_like }}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 操作弹窗 -->

		<!-- 加载状态 -->
		<block v-if="list.length === 0">
			<u-empty :text="'暂无内容'" icon="http://cdn.uviewui.com/uview/empty/data.png" marginTop="100px"></u-empty>
		</block>

		<view class="customization" v-if="list.length" @click="addForum()">
			<image src="/static/announce.png" mode=""></image>
			<view class="">
				发布
			</view>
		</view>
		<Loading />
		<tqb-tabbar activeIndex="1" />
	</view>
</template>

<script>
	import {
		themesColor
	} from '@/uni.scss';
	export default {

		data() {
			return {
				list: [],
				themesColor,
				showAction: false,
				choosePost: '',
				chooseIndex: '',
				userData: {},
				trend_count:0
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onLoad() {
			this.userData = uni.getStorageSync("userData")
			
		},
		onShow() {
			this.upData()
		},
		onPullDownRefresh(e) {
			this.upData()
		},
		methods: {
			upData() {
				let data = {
					page: 1,
					list_rows: 2
				}
				this.$myRuquest('home/index/trends_list', data).then(res => {
					// if(res.data.len)
					this.trend_count=res.trend_count
					this.list = res.data.data
				})
			},
			leftClick(){
				// console.log('??????')
			// return uni.showToast({
			// 		title: '开发中！',
			// 		icon: "none"
			// 	});
				uni.navigateTo({
					url:'./interactionForum/interactionForum'
				})
			},
			addForum() {
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image', 'video'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					success(data) {
						// res.type
						console.log(data)
						that.$uploadFiles({
							filePath: data.tempFiles[0].tempFilePath,
							type: data.type
						}).then(res => {
							console.log(res.data)
							uni.navigateTo({
								url: './addForum?type=' + data.type + '&url=' + res.data
							})
						})
					}
				})

			},
			onActive(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除该动态吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$myRuquest('home/user/del_my_trends', {
								id: item.id
							}).then(res => {
								that.upData()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
		 		}
		 	});
			},

			// addCollection(id, index) {
			// 	this.$myRuquest('home/user/like_comment', {
			// 			id: item.id
			// 		})
			// 		.then(res => {
			// 			if (res.code === 1) {
			// 				this.list[index].is_collection = true;
			// 				this.list[index].collection_count++;
			// 			}
			// 		});
			// },
			addCollection(item) {
				let data = {
					id: item.id,
					is_like: item.status == 1 ? 0 : 1,
					pid:0
				}	
				this.$myRuquest('home/user/like_comment', data, 'POST').then(res=>{	
					this.upData()
				})
			},

			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				});
			},
			jump(e) {
				uni.navigateTo({
					url: './forumDetails?id=' + e.id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top-left{
		position: relative;
	}
	.customization {
		position: fixed;
		right: 20upx;
		bottom: 160upx;
		z-index: 1999;
		text-align: center;
		font-size: 24upx;
		border-radius: 15upx;
		background-color: rgba(0, 0, 0, .7);
		color: #fff;
		width: 90upx;
		height: 90upx;
		padding: 10upx;
		// animation: an 2s ease-out;

		image {
			width: 50upx;
			height: 50upx;
		}
	}

	.post-item {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		.post-content {
			margin-top: 20rpx;
			margin-left: 100rpx;

			.img-style-1 {
				display: block;
				width: 50%;
				max-height: 600rpx;
				border-radius: 5px;
				overflow: hidden;
			}

			.img-style-2 {
				display: flex;

				image {
					margin: 5rpx;
					border-radius: 5px;
					width: 100%;
					height: 294rpx;
				}
			}

			.img-style-3 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 31.3%;
					height: 200rpx;
					margin: 1%;
					border-radius: 5px;
				}
			}
		}
		.address {
			display: inline-flex;
			font-size: 20rpx;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			padding: 5rpx 20rpx;
			margin: 20rpx 0;

			.text {
				margin-left: 5rpx;
			}
		}
	}

	.post-item-top-user {
		display: flex;
		align-items: center;

		.avatar {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.center {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: #999;

			.username {
				font-size: 32rpx;
				font-weight: 600;
				color: #616161;
			}

			.official {
				display: inline-block;
				font-size: 20rpx;
				color: #fff;
				background-color: $theme-color;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			height: 85rpx;

			.arrow-down {
				color: #999;
			}
		}
	}

	.p-footer {
		display: flex;
		margin: 20rpx 0;
		// margin-left:100rpx;

		.p-item {
			margin: 0 auto;
			color: #616161;
			display: flex;
			align-items: center;
			.count {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}

		.p-item[hidden] {
			display: none !important;
		}
	}

	.comment-wrap {
		font-size: 28rpx;
		padding-top: 20rpx;
		border-top: 1px solid #f5f5f5;

		.item {
			.name {
				color: #000;
				font-weight: 600;
			}
		}
	}

	.post-content-wrap {
		margin-bottom: 20rpx;

		.discuss-item {
			display: inline-block;
			color: #2b85e4;
			margin-right: 20rpx;
		}
	}
</style>
